<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view>
    <view class="index">
      <page-bg></page-bg>

      <!--顶部-->
      <u-navbar
          :safeAreaInsetTop="false"
          :placeholder="false"
          :is-back="false"
          :is-fixed="true"
          :title="'专区'"
          :border-bottom="false"
          :title-bold="true"
          :title-color="'#111111'"
          :background="{ background : navBg }"
      >
      </u-navbar>

      <view>
        <tabs
            :current="navCurrent"
            @change="navChange"
            bar-width="60"
            :isScroll="true"
            :activeColor="'#111'"
            :bgColor="'transparent'"
            :stickyBgColor="'transparent'"
            :fontSize="34"
            :height="80"
            :bold="true"
            :inactiveColor="'#888'"
            :barStyle="{
          bottom: '-8rpx',
          height: '8rpx',
          borderRadius: '8rpx',
          backgroundColor: 'transparent',
          backgroundImage: 'linear-gradient(to right, var(--color-primary), var(--color-minor))'
        }"
        >
          <view class="page-sort">
            <view class="sort-list">
              <view class="list-item" @click="showSort = true">
                <view class="item-name">排序</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showAge = true">
                <view class="item-name">年龄</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showHeight = true">
                <view class="item-name">身高</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showMorePop = true">
                <view class="item-name">更多</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
            </view>
          </view>
          <tab v-for="(item, i) in navList" :key="i" :name="item.name">
            <view class="news-list">
              <view class="px-[30rpx]">
                <w-blind-date-list :cid="item.id" :list_calss="navList[navCurrent].list_calss" :i="i" :index="navCurrent"></w-blind-date-list>
              </view>
            </view>
          </tab>
        </tabs>

      </view>

      <!-- 返回顶部按钮 -->
      <u-back-top
          :scroll-top="scrollTop"
          :top="100"
          :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
      >
      </u-back-top>

      <!--筛选-->
      <u-picker mode="selector" v-model="showSort" :default-selector="[0]" :range="selectorSort"
                range-key="cateName"></u-picker>
      <!--年龄-->
      <u-picker mode="multiSelector" v-model="showAge" :default-selector="[0,0,0]" :range="selectorAge"
                range-key="cateName"></u-picker>
      <!--身高-->
      <u-picker mode="multiSelector" v-model="showHeight" :default-selector="[0,0,0]" :range="selectorHeight"
                range-key="cateName"></u-picker>

      <!--更多-->
      <u-popup v-model="showMorePop" mode="right" border-radius="40">
        <u-navbar
            :safeAreaInsetTop="false"
            :placeholder="false"
            :is-back="false"
            :is-fixed="true"
            :border-bottom="false"
            :title-bold="true"
            :title-color="'#111111'"
            :background="{ background : '#fff' }"
        >
          <template #default>
            <view class="page-title">嘉宾筛选</view>
          </template>
        </u-navbar>

        <view class="page-side">
          <view class="side-con">
<!--            <view class="side-title">-->
<!--              嘉宾筛选-->
<!--            </view>-->
            <view class="side-search">
              <u-icon size="30" color="#CACACA" name="search" class="search-icon"></u-icon>
              <input class="search-input" type="text" placeholder="按用户ID/昵称">
            </view>
            <view class="side-list">
              <view class="list-one" v-for="(item,index) in sideList" :key="index">
                <view class="one-title">{{ item.name }}</view>
                <u-icon size="28" color="#999" name="arrow-right" class="one-icon"></u-icon>
              </view>
            </view>
            <view class="side-bottom">
              <view class="bottom-btn">
                  重置
              </view>
              <view class="bottom-btn bottom-btnActive">
                  确定
              </view>
            </view>
          </view>

        </view>
      </u-popup>

      <tabbar/>
    </view>

  </view>

</template>
<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {getDictData} from "@/utils/dictionary";
import MpPrivacyPopup from "@/pages/index/component/mp-privacy-popup.vue";
import {onPageScroll} from "@dcloudio/uni-app";

const scrollTop = ref<number>(0)
const navBg = ref<string>('rgba(255,255,255,0)')
const showSort = ref(false)
const showAge = ref(false)
const showHeight = ref(false)
const showMorePop = ref(false)

console.log('getDictData=====>',getDictData())


const navCurrent = ref(0)
const selectorSort = ref([
  {
    cateName: '从高到低',
    id: 1
  },
  {
    cateName: '从低到高',
    id: 2
  }
])
const selectorHeight = ref([
  [
    {
      cateName: '166cm',
      id: 1
    },
    {
      cateName: '167cm',
      id: 2
    }
  ], [
    {
      cateName: '至',
      id: 1
    }
  ], [
    {
      cateName: '168cm',
      id: 1
    },
    {
      cateName: '169cm',
      id: 2
    }
  ]
])
const selectorAge = ref([
  [
    {
      cateName: '18岁',
      id: 1
    },
    {
      cateName: '19岁',
      id: 2
    }
  ], [
    {
      cateName: '至',
      id: 1
    }
  ], [
    {
      cateName: '20岁',
      id: 1
    },
    {
      cateName: '21岁',
      id: 2
    }
  ]
])
const navList = ref([
  {
    name: '全部',
    id: '',
    list_calss: 0
  },
  {
    name: '教师专区',
    id: 1,
    list_calss: 1
  },
  {
    name: '高薪专区',
    id: 2,
    list_calss: 2
  },
  {
    name: '企政专区',
    id: 3,
    list_calss: 3
  },
  {
    name: '其他',
    id: 3,
    list_calss: 0
  }
])
const sideList = ref([
  {
    name: '年龄范围',
    id: '',
  },
  {
    name: '身高范围',
    id: 1,
  },
  {
    name: '体重范围',
    id: 2,
  },
  {
    name: '工作地区',
    id: 3,
  },
  {
    name: '户籍地区',
    id: 3,
  },
  {
    name: '婚姻史',
    id: 3,
  },
  {
    name: '民族',
    id: 3,
  },
  {
    name: '工作',
    id: 3,
  },
  {
    name: '子女情况',
    id: 3,
  },
  {
    name: '最低学历',
    id: 3,
  },
  {
    name: '最低月收入',
    id: 3,
  }
])

const navChange = (item: any) => {
  console.log('item', item)
  navCurrent.value = item
}

onPageScroll((event: any) => {
  scrollTop.value = event.scrollTop
  const top = uni.upx2px(100)
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})


const state = reactive<{
  pages: any[]
  meta: any[]
  article: any[]
  bannerImage: string
}>({
  pages: [],
  meta: [],
  article: [],
  bannerImage: ''
})


</script>
<style scoped lang="scss">
.index {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-sort {
  .sort-list {
    width: calc(100% - 30rpx);
    margin: 30rpx auto;
    background-image: linear-gradient(to top, var(--color-primary), var(--color-minor));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 80rpx;

    .list-item {
      font-size: 30rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 40rpx;

      .item-name {
        margin-right: 10rpx;
      }
    }
  }
}

.page-side {
  width: 80vw;
  .side-con {
    padding: 0 30rpx;
  }
  .side-title {
    font-size: 40rpx;
    color: #111111;
    font-weight: bold;
  }
  .side-search {
    width: 100%;
    margin-top: 20rpx;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    background-color: #F0F7FF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .search-input {
      width: 100%;
      padding: 0 30rpx;
      font-size: 30rpx;
      color: #333333;
      line-height: 30rpx;
      height: 30rpx;
    }
    .search-icon {
      padding-right: 20rpx;
      border-right: 2rpx solid #CACACA;
    }
  }
  .side-list {
    margin-top: 20rpx;
    padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
    .list-one {
      width: 100%;
      padding: 26rpx 0;
      border-bottom: 2rpx solid #E8E8E8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #111111;
      font-size: 30rpx;
    }
  }
  .side-bottom {
    width: 100%;
    right: 0;
    padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30rpx;
    .bottom-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      background-color: #F0F7FF;
      color: #999999;
      &Active {
        background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
        color: #ffffff;
      }
    }
  }
}

.page-title {
  padding: 0 30rpx;
  text-align: left;
  font-size: 40rpx;
  color: #111111;
  font-weight: bold;
}
</style>